
<template>
  <div class="news-view">
    <app-header></app-header>
    <div class="news-container">
      <div class="news-content">
        <div class="news-search">
          <input type="text" v-model="searchKeyword" placeholder="输入检索词"/>
          <button @click="handleSearch">检索</button>
        </div>
      </div>
    </div>
    <div class="news-container">
      <div class="news-content">
        <div class="news-list">
          <div class="news-header">
            <div class="news-header-title">资讯标题</div>
            <div class="news-header-type">资讯类别</div>
            <div class="news-header-date">发布时间</div>
          </div>
          <div class="news-item" v-for="item in newsList" :key="item.id" @click="goToNewsDetail(item.id)">
            <div class="news-item-wrap">
              <div class="news-item-text">{{ item.newsTitle }}</div>
              <div class="news-item-type">{{ item.newsType === 1 ? "通知" : '新闻' }}</div>
              <div class="news-item-date">{{ item.createTime.slice(0, 10) }}</div>
            </div>
          </div>
        </div>
        <div class="news-page">
          <div class="pagination">
            <button class="page-btn" :disabled="currentPage === 1" @click="goToPage(currentPage - 1)">
              上一页
            </button>
            <button
                v-for="page in pageList"
                :key="page"
                class="page-number"
                :class="{ active: page === currentPage }"
                @click="goToPage(page)"
            > {{ page }}
            </button>
            <button class="page-btn" :disabled="currentPage === totalPage" @click="goToPage(currentPage + 1)">
              下一页
            </button>
          </div>
        </div>
      </div>
    </div>
    <app-footer></app-footer>
  </div>
</template>

<script>import AppHeader from '../components/AppHeader.vue'
import AppFooter from '../components/AppFooter.vue'
import {ListNews} from "@/service/news"

export default {
  name: 'News',
  components: {
    AppHeader,
    AppFooter
  },
  data() {
    return {
      newsList: [],
      searchKeyword: '',
      currentPage: 1,
      totalPage: 0,
      pageSize: 10,
      total: 0
    }
  },
  mounted() {
    this.getNews();
  },
  computed: {
    pageList() {
      const pages = [];
      const currentPage = this.currentPage;
      const totalPage = this.totalPage;

      // 如果总页数小于等于3页，直接显示所有页码
      if (totalPage <= 3) {
        for (let i = 1; i <= totalPage; i++) {
          pages.push(i);
        }
        return pages;
      }

      // 始终显示第一页
      pages.push(1);

      if (currentPage > 4) {
        pages.push('...');
      }

      // 显示当前页前后各2页
      for (let i = Math.max(2, currentPage - 2); i <= Math.min(totalPage - 1, currentPage + 2); i++) {
        pages.push(i);
      }

      if (currentPage < totalPage - 3) {
        pages.push('...');
      }

      // 始终显示最后一页（如果不是第一页）
      if (totalPage > 1) {
        pages.push(totalPage);
      }

      return pages;
    }
  },
  methods: {
    getNews() {
      ListNews({
        page: this.currentPage,
        size: this.pageSize,
      }).then(response => {
        if (response && response.data && response.data.records) {
          this.newsList = response.data.records;
          // 从返回数据中获取分页信息
          this.currentPage = response.data.current;
          this.pageSize = response.data.size;
          this.totalPage = response.data.pages;
          this.total = response.data.total;
        }
      }).catch(error => {
        console.error('Error fetching news:', error);
      });
    },
    handleSearch() {
      ListNews({
        page: this.currentPage - 1,
        size: this.pageSize,
        newsTitle: this.searchKeyword
      }).then(response => {
        if (response && response.data && response.data.records) {
          this.newsList = response.data.records;
          // 从返回数据中获取分页信息
          this.currentPage = response.data.current;
          this.pageSize = response.data.size;
          this.totalPage = response.data.pages;
          this.total = response.data.total;
        }
      }).catch(error => {
        console.error('Error searching news:', error);
      });
    },
    goToPage(page) {
      if (page === '...') return;
      this.currentPage = page;
      this.getNews();
    },
    goToNewsDetail(newsId) {
      // this.$router.push(`/news/${newsId}`);
      const routeData = this.$router.resolve({path: `/news/${newsId}`});
      window.open(routeData.href, '_blank');
    }
  }
}
</script>

<style scoped>.news-view {
  .news-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;

    .news-content {
      background: white;
      border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      padding: 20px;

      .news-search {
        display: flex;
        align-items: center;
        margin-bottom: 20px;

        input {
          flex: 1;
          padding: 8px;
          border: 1px solid #ccc;
          border-radius: 4px;
        }

        button {
          padding: 8px 16px;
          margin-left: 10px;
          background-color: #2973D7;
          color: white;
          border: none;
          border-radius: 4px;
          cursor: pointer;

          &:hover {
            background-color: #0056b3;
          }
        }
      }

      .news-list {
        .news-header {
          display: flex;
          padding: 12px 16px;
          background-color: #f0f0f0;
          font-weight: bold;
          border-radius: 4px 4px 0 0;

          .news-header-title {
            flex: 3;
          }

          .news-header-type {
            flex: 1;
            text-align: center;
          }

          .news-header-date {
            flex: 1;
            text-align: center;
          }
        }

        .news-item {
          display: flex;
          padding: 16px;
          border-radius: 4px;
          background-color: #f9f9f9;
          margin-bottom: 1px;
          transition: all 0.3s ease;
          cursor: pointer;

          &:hover {
            background-color: #f0f7ff;
            transform: translateX(4px);
          }

          .news-item-wrap {
            flex: 1;
            display: flex;

            .news-item-text {
              flex: 3;
              font-size: 14px;
              color: #333;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              padding-right: 16px;
            }

            .news-item-type {
              flex: 1;
              text-align: center;
              font-size: 13px;
              color: #666;
              display: flex;
              align-items: center;
              justify-content: center;
            }

            .news-item-date {
              flex: 1;
              text-align: center;
              font-size: 12px;
              color: #999;
              display: flex;
              align-items: center;
              justify-content: center;
            }
          }
        }
      }

      .news-page {
        display: flex;
        justify-content: center;
        margin-top: 20px;
        padding: 20px 0;

        .pagination {
          display: flex;
          align-items: center;

          .page-btn,
          .page-number {
            padding: 8px 12px;
            margin: 0 4px;
            border: 1px solid #ddd;
            background-color: white;
            color: #333;
            cursor: pointer;
            border-radius: 4px;
            min-width: 40px;

            &:hover:not(:disabled) {
              background-color: #f0f7ff;
              border-color: #2973D7;
            }

            &.active {
              background-color: #2973D7;
              color: white;
              border-color: #2973D7;
            }

            &:disabled {
              background-color: #f5f5f5;
              color: #999;
              cursor: not-allowed;
            }
          }
        }
      }
    }
  }
}
</style>